<script setup>

const props = defineProps({
  type: {
    type: String,
    default: "success"
  }
})

</script>

<template>
  <div class="flex items-center justify-center">
    <svg v-if="type == 'success' " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
         class="icon-success w-[80px]">
      <path fill="currentColor"
            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path>
    </svg>
    <svg v-if="type == 'error' " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
         class="icon-error w-[80px]">
      <path fill="currentColor"
            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"></path>
    </svg>
    <svg v-if="type == 'warning' " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"
         class="icon-warning w-[80px]">
      <path fill="currentColor"
            d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 192a58.43 58.43 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.43 58.43 0 0 0 512 256m0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4"></path>
    </svg>
  </div>
</template>

<style scoped lang="less">
.icon-success {
  color: #67c23a;
}

.icon-error {
  color: #f56c6c;
}

.icon-warning {
  color: #e6a23c;
}
</style>
